ANTOOZA-FRONTEND/app/(main)/games/[id]/GameMediaGallery.tsx

'use client';

import { useEffect, useMemo, useState } from 'react';
import Image from 'next/image';
import { ChevronLeft, ChevronRight, Play } from 'lucide-react';
import { youTubeId } from '@/lib/utils/youtube';

type MediaItem =
	| { type: 'video'; embed: string; thumb: string }
	| { type: 'image'; src: string };

type Props = {
	trailerUrl: string|null;
	images: string[];
};

export default function GameMediaGallery({ trailerUrl, images }: Props)
{
	const items = useMemo<MediaItem[]>(() => {
		const list: MediaItem[] = [];
		const id = youTubeId(trailerUrl);
		if (id) {
			list.push({ type: 'video', embed: `https://www.youtube.com/embed/${id}`, thumb: `https://img.youtube.com/vi/${id}/hqdefault.jpg` });
		}
		for (const src of images) {
			list.push({ type: 'image', src });
		}
		return list;
	}, [trailerUrl, images]);

	const [active, setActive] = useState(0);

	useEffect(() => {
		setActive(0);
	}, [items.length]);

	if (items.length === 0) {
		return null;
	}

	const index = Math.min(active, items.length - 1);
	const current = items[index];
	const hasVideo = items[0]?.type === 'video';
	const move = (delta: number) => {
		setActive(prev => (prev + delta + items.length) % items.length);
	};

	return (
		<section className="flex flex-col gap-3">
			<div className="relative w-full overflow-hidden rounded-xl bg-black">
				<div className="relative aspect-video w-full">
					{current.type === 'video' ? (
						<iframe
							src={current.embed}
							title="게임 예고편"
							allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
							allowFullScreen
							className="absolute inset-0 size-full"
						/>
					) : (
						<Image src={current.src} alt="게임 스크린샷" fill unoptimized sizes="(max-width: 1024px) 100vw, 66vw" className="object-contain" />
					)}
				</div>

				{items.length > 1 && (
					<>
						<button
							type="button"
							onClick={() => move(-1)}
							aria-label="이전"
							className="absolute left-2 top-1/2 flex size-9 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white transition hover:bg-black/70"
						>
							<ChevronLeft className="size-5" />
						</button>
						<button
							type="button"
							onClick={() => move(1)}
							aria-label="다음"
							className="absolute right-2 top-1/2 flex size-9 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white transition hover:bg-black/70"
						>
							<ChevronRight className="size-5" />
						</button>
					</>
				)}
			</div>

			{items.length > 1 && (
				<div className="flex gap-2 overflow-x-auto pb-1">
					{items.map((it, i) => (
						<button
							type="button"
							key={it.type === 'video' ? it.embed : it.src}
							onClick={() => setActive(i)}
							aria-label={it.type === 'video' ? '예고편' : `스크린샷 ${i + (hasVideo ? 0 : 1)}`}
							aria-current={i === index}
							className={`relative aspect-video w-28 shrink-0 overflow-hidden rounded-md border-2 transition ${i === index ? 'border-[var(--text-link)]' : 'border-transparent opacity-60 hover:opacity-100'}`}
						>
							<Image src={it.type === 'video' ? it.thumb : it.src} alt="" fill unoptimized sizes="112px" className="object-cover" />
							{it.type === 'video' && (
								<span className="absolute inset-0 flex items-center justify-center bg-black/30">
									<Play className="size-5 text-white" fill="white" />
								</span>
							)}
						</button>
					))}
				</div>
			)}
		</section>
	);
}